<!--
* @author wn
* @date 2022/07/21 10:41:44
* @description: QQ登录回调页 绑定账号
!-->
<template>
	<!-- QQ账号信息 -->
	<div class="user-info">
		<img :src="avatar" v-if="avatar" alt="" />
		<img src="@/assets/images/200.png" v-else alt="" />
		<p>Hi,{{ nickName }} 欢迎来小兔鲜,完成绑定后可以QQ账号一键登录哦~</p>
	</div>
	<!-- 表单 手机验证码 autocomplete="off"-->
	<Form
		class="xtx-form"
		ref="target"
		:validation-schema="mySchema"
		v-slot="{ errors }"
	>
		<div class="xtx-form-item">
			<div class="input">
				<i class="iconfont icon-phone"></i>
				<Field
					name="mobile"
					v-model="form.mobile"
					type="text"
					placeholder="绑定的手机号"
					:class="{ errors: errors.mobile }"
				/>
			</div>
			<div class="error">
				<i class="iconfont icon-warning" v-if="errors.mobile" />
				{{ errors.mobile }}
			</div>
		</div>
		<div class="xtx-form-item">
			<div class="input">
				<i class="iconfont icon-code"></i>
				<Field
					name="code"
					v-model="form.code"
					type="number"
					placeholder="请输入验证码"
					:class="{ errors: errors.code }"
				/>
				<span class="code" @click="btnSend">
					{{ time === 0 ? '发送验证码' : `${time}秒后发送` }}
				</span>
			</div>
			<div class="error">
				<i class="iconfont icon-warning" v-if="errors.code" />
				{{ errors.code }}
			</div>
		</div>
		<a href="javascript:;" class="submit" @click="submit">立即绑定</a>
	</Form>
</template>
<script>
import { Form, Field } from 'vee-validate'
import schema from '@/utils/vee-validate-schema'
import { ref, reactive, toRefs } from 'vue'
import QC from 'qc'
import Message from '@/components/library/message'
// import { useIntervalFn } from '@vueuse/core'
import { userQQBindCode, userQQBindLogin } from '@/network/user'
// import { useStore } from 'vuex'
// import { useRouter } from 'vue-router'
import { useCountDownBtn, useQQLoginSavePush } from '@/hooks'

export default {
	name: 'CallBackBind',
	components: { Form, Field },
	props: {
		openId: {
			type: String,
			require: true,
		},
	},
	/**
	 *  1 openID   QQ 头像 昵称
	 *  2 表单校验
	 *  3 获取验证码
	 *  4 立即绑定
	 */
	setup(props) {
		// 1 获取 QQ 头像 昵称
		const QQInfo = getQQInfo()
		// 2 表单校验 --schema
		const target = ref(null)
		const form = reactive({
			mobile: null,
			code: null,
		})
		const mySchema = {
			mobile: schema.mobile,
			code: schema.code,
		}
		// 3 获取验证码
		const { time, resume } = useCountDownBtn()
		// 组件销毁时  也要停止定时器
		// onUnmounted(() => pause())
		// 发送手机验证码
		const btnSend = async () => {
			// 1 校验 手机号正确  true  失败-->String String也是true ===
			const mobileResult = schema.mobile(form.mobile)
			// 2 且倒计时 必须是0 其他时间已经触发过了 在等待中
			if (mobileResult === true && time.value === 0) {
				try {
					// 3 调用获取验证码接口
					await userQQBindCode(form.mobile)
					// 4 无需结果  能继续执行 就是成功
					// 5 开启定时器 与 消息提示 与 60秒
					time.value = 60
					resume()
					Message({ type: 'success', message: '发送成功' })
				} catch (error) {
					Message({
						type: 'warn',
						message: `${
							error.response ? error.response.data.message : '发送失败'
						}`,
					})
				}
			} else {
				// 5 校验失败  errors 提示  time不是 0 校验成功不提示
				// Form组件 setFieldError(哪个name,错误信息)触发 v-slot="{ errors }.mobile
				mobileResult === true ||
					target.value.setFieldError('mobile', mobileResult)
			}
		}
		// 4 立即绑定
		// const store = useStore()
		// const router = useRouter()
		const submit = async () => {
			const valid = await target.value.validate()
			if (valid) {
				/* try {
					const { result } = await userQQBindLogin(
						props.openId,
						form.mobile,
						form.code
					)
					const { id, avatar, nickName, account, mobile, token } = result
					store.commit('user/setUser', {
						id,
						avatar,
						nickName,
						account,
						mobile,
						token,
					})
					router.push(store.state.user.redirectUrl)
					Message({ type: 'success', message: 'QQ登录成功' })
				} catch (error) {
					console.dir(error)
					Message({
						type: 'error',
						message: `${
							error.response ? error.response.data.message : '登陆失败'
						}`,
					})
				} */

				// hook
				try {
					await useQQLoginSavePush(() =>
						userQQBindLogin(props.openId, form.mobile, form.code)
					)
				} catch (e) {
					Message({
						type: 'error',
						message: `${e.response ? e.response.data.message : '登陆失败'}`,
					})
				}
			} else {
				// 表单验证失败
				Message({ type: 'warn', message: '表单校验失败' })
			}
		}
		return { target, mySchema, form, time, ...toRefs(QQInfo), btnSend, submit }
	},
}
// 1 openID   QQ 头像 昵称
const getQQInfo = () => {
	const QQInfo = reactive({
		avatar: '',
		nickName: '',
	})
	QC.Login.check() &&
		QC.api('get_user_info').success(({ data }) => {
			QQInfo.avatar = data.figureurl_1
			QQInfo.nickName = data.nickname
		})
	return QQInfo
}
</script>
<style scoped lang="less">
.user-info {
	display: flex;
	align-items: center;
	width: 320px;
	height: 70px;
	margin: 50px auto 25px;
	background: #f2f2f2;
	padding: 0 10px;
	border-radius: 4px;
	img {
		background: #f2f2f2;
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}
}
</style>
